<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				perspective: 500px;
			}
			ul{
				width: 200px;
				height: 200px;
				margin: 0 auto;
				margin-top: 300px;
				position: relative;/* //相对定位 */
				transform-style: preserve-3d;
				transform: rotateX(0deg) rotateY(0deg);
			}
			ul li{
				width: 200px;
				height: 200px;
				text-align: center;
				line-height: 200px;
				font-size: 30px;
				list-style: none;
				position: absolute;/* //绝对定位(li相对ul) */
				top: 0;
				left: 0;
			}
			/* 右 */
			ul li:nth-child(1){
				background: red;
				transform: rotateY(90deg) translateZ(100px);
			}
			/* 左 */
			ul li:nth-child(2){
				background: black;
				transform: rotateY(-90deg) translateZ(100px);
			}
			/* 上 */
			ul li:nth-child(3){
				background: green;
				transform: rotateX(90deg) translateZ(100px);
			}
			/* 下 */
			ul li:nth-child(4){
				background: yellow;
				transform: rotateX(-90deg) translateZ(100px);
			}
			/* 前 */
			ul li:nth-child(5){
				background: #CCCCCC;
				transform: translateZ(100px);
			}
			/* 后 */
			ul li:nth-child(6){
				background: blueviolet;
				transform:  translateZ(-100px) rotateX(0deg);
			}
		</style>
	</head>
	<body>
		<div>
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
			</ul>
		</div>
	</body>
</html>
